<template>
 <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button plain size="mini" type="danger" @click="flag=!flag">{{!flag?'编辑':'取消'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
        v-for="item in channelList"
        :key="item.id"
        :class="{red:active===item.name}"
        @click="changeChannel(item.name)">
          <span>{{item.name}}</span>
          <van-icon name="cross" class="btn"
          v-if="item.id!==0&&flag"
          @click="delMyChannel(item)"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item v-for="item in optionalChannels" :key="item.id" @click="addMyChannel(item)">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: ['channelList', 'optionalChannels', 'active'],
  data () {
    return {
      flag: false
    }
  },
  methods: {
    changeChannel (name) {
      this.$emit('changeChannel', name)
    },
    addMyChannel (item) {
      this.$emit('addMyChannel', item)
    },
    delMyChannel (item) {
      this.$emit('delMyChannel', item)
    }
  }
}
</script>

<style scoped lang='scss'>
 .content {
    padding: 16px 16px 160px;
  }
.channel{
  padding:15px;
  font-size:14px;
  ::v-deep .van-button--mini {
    height: 22px;
    min-width: 50px;
  }
  .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
  }
  .red{
    color:red
  }
}
</style>
